<template>
    <div>
        <template v-for="machine in machineList">
            <div :key="machine.id" class="server-item">
                <div>
                    <p style="font-size: 14px;font-weight: bold">{{machine.hostName}}</p>
                    <p>{{machine.endpointUrl}}:{{machine.endpointPort}}</p>
                </div>
                <div style="text-align: right">
                    <p>
                        <i class="fa fa-lock" style="margin-right: 16px" v-if="machine.isTls === '1'"></i>
                        <i class="fa fa-unlock" style="margin-right: 16px" v-if="machine.isTls === '0'"></i>
                        <i class="fab fa-docker"></i>
                    </p>
                    <p>{{machine.createdAt}}</p>
                </div>
            </div>
        </template>
        <div v-if="!machineList || machineList.length === 0" style="margin-top: 16px;width: 100%; text-align: center">
            <p style="margin-bottom: 12px">你没有管理任何服务器，请添加</p>
            <p>
                <Button type="primary" @click="addServer">add server</Button>
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: {
            serverList: Array,
            filter: String
        },
        computed: {
            machineList() {
                if (!this.filter) {
                    return this.serverList;
                } else {
                    return this.serverList.filter(item => {
                        return item.envTag === this.filter;
                    });
                }
            }
        },
        methods: {
            addServer() {
                this.$router.push({path: '/server/create'});
            }
        }
    }
</script>

<style lang="less" scoped>
    .server-item{
        height: 60px;
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 1px solid #dcdee2;
        align-items: center;
    }
</style>